<template>
  <div>
    <form @submit.prevent="fn">
      <label>姓名：</label>
      <input v-model="uname" type="text" /><br /><br />

      <label>年龄：</label>
      <input v-model="age" type="number" /><br /><br />

      <label>身高：</label>
      <input v-model.trim.number="height" type="text" />(米)<br /><br />

      <label>体重：</label>
      <input v-model.trim.number="weight" type="number" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" /><br /><br />

      <button>诊断</button>
    </form>

    <p>患者{{ uname }} 的诊断结果：{{ state }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '',
      height: '',
      weight: '',
      BMI: '',
      state: '',
    }
  },
  methods: {
    fn() {
      this.BMI = this.weight / (this.height * 2)
      if (this.BMI < 18.5) {
        this.state = '体重过轻'
      } else if (this.BMI >= 18.5 && this.BMI < 24.9) {
        this.state = '健康'
      } else {
        this.state = '体重过重'
      }
    },
  },
}
</script>
